<template>
	<el-pagination
	  	v-if="page.page.total > 10"
		v-model:current-page="page.page.current"
		v-model:page-size="page.page.size"
		:page-sizes="[10, 50, 100, 200, 500]"
		background
		layout="total, sizes, prev, pager, next, jumper"
		:total="page.page.total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
    />
</template>

<script setup name="pagination">
const emits = defineEmits(["getPagination"]);
const props = defineProps({
	pageable: {
		type: Object,
		default: () => ({})
	}
});
const page = reactive({
	page: {
		current: 1,
		size: 10,
		total: 0
	}
})
page.page = props.pageable;

const handleSizeChange = (val) => {
	emits("getPagination", { current: page.page.current, size: val });
}
const handleCurrentChange = (val) => {
	emits("getPagination", { current: val, size: page.page.size });
}

</script>
